<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>硬件熟练度测试</title>
    <link rel="stylesheet" href="css/jquery-ui.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="wrapper">
    <div class="logo">
        <!-- <img src="img/logo.png" alt="school logo"> -->
        <div class="info">
            <p>姓名： <span class="name">Nick</span></p>
            <p>时间： <span class="time">0</span>'S</p>
            <p>错误次数： <span class="num">0</span></p>
        </div>
    </div>
    <ul class="hardware">
        <li>
            <img src="img/cpu.jpg" alt="hardware" class="hardware_cpu">
        </li>
        <!-- <li>
            <img src="img/fan.jpg" alt="hardware" class="hardware_fan">
        </li> -->
        <li>
            <img src="img/grphics.jpg" alt="hardware" class="hardware_grphics">
        </li>
        <li>
            <img src="img/hdd.png" alt="hardware" class="hardware_hdd">
        </li>
        <li>
            <img src="img/network.jpg" alt="hardware" class="hardware_network">
        </li>
        <li>
            <img src="img/sound.jpg" alt="hardware" class="hardware_sound">
        </li>
    </ul>
    
    <div class="mainboard">
        <img src="img/mainboard.png" alt="main board">
        <div class="area cpu" data-name="cpu">cpu</div>
        <!-- <div class="area fan" data-name="fan">fan</div> -->
        <div class="area grphics" data-name="grphics">grphics</div>
        <div class="area hdd" data-name="hdd">hdd</div>
        <div class="area network" data-name="network">network</div>
        <div class="area sound" data-name="sound">sound</div>
    </div>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>
<script src="js/function .js"></script>
</body>
</html>